<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
    }
  </style>
</head>
<body>
<div id="div1"></div>
<!--<script>-->
<!--var div = document.getElementById('div1');-->
<!--var disX = 0;-->
<!--var disY = 0;-->
<!--div.onmousedown = function (e) {-->
<!--var ev = ev || window.event;-->
<!--disX = ev.clientX - div.offsetLeft;-->
<!--disY = ev.clientY - div.offsetTop;-->
<!--document.onmousemove = function(ev){-->
<!--var ev = ev || window.event;-->
<!--div.style.left = ev.clientX - disX + 'px';-->
<!--div.style.top = ev.clientY - disY + 'px';-->
<!--};-->
<!--document.onmouseup = function(){-->
<!--document.onmousemove = null;-->
<!--document.onmouseup = null;-->
<!--};-->
<!--return false;-->
<!--}-->
<!--</script>-->
<script>
  function Drag(id) {
    this.oDiv = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
  }
  Drag.prototype.init= function () {
    this.oDiv.onmousedown = function (ev) {
      var ev = ev|| window.event;
      return false
    }
  };
  Drag.prototype.fnDown = function (ev) {
    var This = this;
    this.disX = ev.clientX - this.oDiv.offsetLeft;
    this.disY = ev.clientY - this.oDiv.offsetTop;
  }
  Drag.prototype.fnMove = function (ev) {
    this.oDiv.style.left = ev.clientX - this.disX + 'px';
    this.oDiv.style.top = ev.clientY - this.disY + 'px';
  }
  Drag.prototype.fnUP = function () {
    document.onmousemove = null;
    document.onmouseup = null;
  }
</script>
</body>
</html>